<template>
    <div>
        <n-space>
        <n-button type="tertiary" @click="insertCarousel" style="margin-bottom: 5px">新增</n-button>
        <n-button type="tertiary" @click="loadData" style="margin-bottom: 5px">刷新</n-button>
        </n-space>
        <n-data-table
            :columns="tableColumns"
            :data="data"
            :loading="loading"
            :row-key="rowKey"
            :paginate-single-page="false"
            @update:page="handlePageChange"
            :pagination="pagination" />

        <n-modal
            preset="dialog"
            title="新增轮播图"
            positive-text="确定"
            negative-text="取消"
            @positive-click="clickOk"
            @negative-click="clickCancel"
            v-model:show="showModal">
            <n-form
                ref="formRef"
                :label-width="80"
                :model="form"
                :rules="rules"
                size="medium">
                <n-form-item label="排序" path="sort">
                    <n-input-number v-model:value="form.sort" style="width: 100%" clearable />
                </n-form-item>
                <n-form-item label="图片" path="url">
                    <x-upload @value-change="valueChange" :max="1" :value="form.url" />
                </n-form-item>
            </n-form>
        </n-modal>

    </div>
</template>
<script setup lang="ts">
import {page, insert, update, deleteById} from '@/api/carousel';
import {reactive, ref, onMounted} from 'vue';
import {columns, rulesInfo, formInfo} from "./types";
import XUpload from '@/components/XUpload/index.vue';
import { NButton, FormInst, FormItemRule, NSpace, NPopconfirm } from 'naive-ui';
const pagination = reactive({
    page: 1,
    pageSize: 10,
});
const actionColumns : any[] = [
    {
        title: '操作',
        key: 'actions',
        width: 150,
        render: (row: any) => {
            return [h(
                NButton,
                {
                    size: 'small',
                    text: true,
                    type: 'primary',
                    onClick: () => {
                        form.url = row.url;
                        form.ID = row.id;
                        form.sort = row.sort;
                        showModal.value = true;
                    }
                },
                { default: () => '编辑' },
            ),h(
                NButton,
                {
                    size: 'small',
                    text: true,
                    style: {
                        marginLeft: '5%'
                    },
                    type: 'error',
                    onClick: () => {
                        window.$dialog.warning({
                            title: '警告',
                            content: `是否删除该项数据？`,
                            positiveText: '确定',
                            negativeText: '取消',
                            onPositiveClick: () => {
                                deleteById(row.id).then(({ code, message }: any) => {
                                     if (code === 200) {
                                         loadData();
                                     } else {
                                         window.$message.error(message);
                                     }
                                });
                            },
                        });
                    }
                },
                { default: () => '删除' },
            )]
        }
    }
]
/**
 * 表格列
 */
const tableColumns = ref(columns.concat(actionColumns));
const loading = ref<boolean>(false);
const data = ref([]);
const showModal = ref<boolean>(false);
const formRef = ref<FormInst | null>(null);
const rules = ref(rulesInfo);
let form = reactive<any>(formInfo);

// 渲染结束加载数据
onMounted(() => {
    loadData();
})

const loadData = async () => {
    loading.value = true;
    const res: any = await page({pageNum: pagination.page, pageSize: pagination.pageSize, SortName: 'sort'});
    data.value = res.rows;
    loading.value = false;
}

const handlePageChange = (pageNum: number) => {
    pagination.page = pageNum;
    loadData()
}

const rowKey = ({id}: any) => {
    return id;
}

const insertCarousel = () => {
    showModal.value = true;
}

const valueChange = (data: string[]) => {
    form.url = data.join(',');
}

const clickOk = async () => {
    const valid = await formRef.value?.validate();
    if (!valid) {
        if (form.id) {
            const { code } : any = await update(form);
        } else {
            const { code } : any = await insert(form);
        }
        showModal.value = false;
        form.sort = 0;
        form.url = '';
        await loadData();
    }
}

const clickCancel = () => {
    showModal.value = false;
}

</script>
<style lang="scss" scoped>

</style>
